//glcartoon.js
//This contains all the routines for rendering a cartoon given a set
//of atoms with assigned secondary structure

import { Vector3 } from "./WebGL/math";
import { Triangle, Sphere } from "./WebGL/shapes";
import { MeshDoubleLambertMaterial, Mesh, Geometry, Material, Coloring } from "./WebGL";
import { Gradient } from "./Gradient";
import { CC, ColorSpec, ColorschemeSpec } from "./colors";
import { CAP, GLDraw } from "./GLDraw";
import { isNumeric, getColorFromStyle, extend } from "./utilities";
import { AtomSpec } from "specs";

/**
 * A visualization of protein or nucleic acid secondary structure.  Applying this to other molecules will not show anything.
  In nucleic acids, the base cylinders obtain their color from the  atom to which the cylinder is drawn, which is 'N1' for purines (resn: 'A', 'G', 'DA', 'DG') and 
  'N3' for pyrimidines (resn: 'C', 'U', 'DC', 'DT'). 
  The different nucleobases can therefore be distinguished as by setting the colors 
  of each of these atoms. The backbone color is set from the 'P' atoms ('O5' for the 5' terminus).

 * 
 * @example $3Dmol.download("pdb:4ZD3",viewer,{},function(){
                  viewer.setBackgroundColor(0xffffffff);
                  viewer.setViewStyle({style:"outline"});
                  viewer.setStyle({},{cartoon:{}});
                  viewer.render();
              });
 */
export interface CartoonStyleSpec {
    /** do not show  */
    hidden?: boolean;
    /** colorscheme to use on atoms; overrides color */
    colorscheme?: ColorschemeSpec;
    /** strand color, may specify as 'spectrum' which will apply reversed gradient based on residue number */
    color?: ColorSpec;
    /**  Allows the user to provide a function for setting the colorschemes. */
    colorfunc?: Function;
    /**  style of cartoon rendering (trace, oval, rectangle (default), parabola, edged) */
    style?: string;
    /**  whether to use constant strand width, disregarding
    *       secondary structure; use thickness to adjust radius */
    ribbon?: boolean;
    /** whether to add arrows showing beta-sheet
    *       directionality; does not apply to trace or ribbon */
    arrows?: boolean;
    /** whether to display alpha helices as simple cylinders;
    *       does not apply to trace */
    tubes?: boolean;
    /** cartoon strand thickness, default is 0.4 */
    thickness?: number;
    /** cartoon strand width, default is secondary
    *       structure-dependent; does not apply to trace or ribbon */
    width?: number;
    /** set opacity from 0-1; transparency is set per-chain
    *       with a warning outputted in the event of ambiguity */
    opacity?: number,
    /** If there is a gap of strictly fewer than gapcutoff missing residues
     * within a chain, draw a dashed line.
     */
    gapcutoff?: number
};

// helper functions
// Catmull-Rom subdivision
export function subdivide_spline(_points, DIV) { // points as Vector3
    var ret = [];
    var points = _points;
    points = []; // Smoothing test
    points.push(_points[0]);

    var i, lim, size;
    var p0, p1, p2, p3, v0, v1;

    for (i = 1, lim = _points.length - 1; i < lim; i++) {
        p1 = _points[i];
        p2 = _points[i + 1];
        if (p1.smoothen) {
            var np = new Vector3((p1.x + p2.x) / 2,
                (p1.y + p2.y) / 2, (p1.z + p2.z) / 2);
            np.atom = p1.atom;
            points.push(np);
        }
        else
            points.push(p1);
    }
    points.push(_points[_points.length - 1]);

    for (i = -1, size = points.length; i <= size - 3; i++) {
        p0 = points[(i === -1) ? 0 : i];
        p1 = points[i + 1];
        p2 = points[i + 2];
        p3 = points[(i === size - 3) ? size - 1 : i + 3];
        v0 = new Vector3().subVectors(p2, p0).multiplyScalar(0.5);
        v1 = new Vector3().subVectors(p3, p1).multiplyScalar(0.5);
        if (p2.skip)
            continue;

        for (var j = 0; j < DIV; j++) {
            var t = 1.0 / DIV * j;
            var x = p1.x + t * v0.x + t * t *
                (-3 * p1.x + 3 * p2.x - 2 * v0.x - v1.x) + t * t * t *
                (2 * p1.x - 2 * p2.x + v0.x + v1.x);
            var y = p1.y + t * v0.y + t * t *
                (-3 * p1.y + 3 * p2.y - 2 * v0.y - v1.y) + t * t * t *
                (2 * p1.y - 2 * p2.y + v0.y + v1.y);
            var z = p1.z + t * v0.z + t * t *
                (-3 * p1.z + 3 * p2.z - 2 * v0.z - v1.z) + t * t * t *
                (2 * p1.z - 2 * p2.z + v0.z + v1.z);

            var pt = new Vector3(x, y, z);
            if (j < DIV / 2) {
                pt.atom = p1.atom;
            } else {
                pt.atom = p2.atom;
            }

            ret.push(pt);
        }
    }
    ret.push(points[points.length - 1]);
    return ret;
};


const coilWidth = 0.5;
const helixSheetWidth = 1.3;
const nucleicAcidWidth = 0.8;
const defaultThickness = 0.4;
const baseThickness = 0.4;

function drawThinStrip(geo: Geometry, p1, p2, colors) {

    var offset, vertoffset;
    var color, colori;

    for (var i = 0, lim = p1.length; i < lim; i++) {

        colori = Math.round(i * (colors.length - 1) / lim);
        color = CC.color(colors[colori]);

        var geoGroup = geo.updateGeoGroup(2);
        var vertexArray = geoGroup.vertexArray;
        var colorArray = geoGroup.colorArray;
        var faceArray = geoGroup.faceArray;
        offset = geoGroup.vertices;
        vertoffset = offset * 3;

        vertexArray[vertoffset] = p1[i].x;
        vertexArray[vertoffset + 1] = p1[i].y;
        vertexArray[vertoffset + 2] = p1[i].z;

        vertexArray[vertoffset + 3] = p2[i].x;
        vertexArray[vertoffset + 4] = p2[i].y;
        vertexArray[vertoffset + 5] = p2[i].z;

        for (var j = 0; j < 6; ++j) {
            colorArray[vertoffset + 3 * j] = color.r;
            colorArray[vertoffset + 1 + 3 * j] = color.g;
            colorArray[vertoffset + 2 + 3 * j] = color.b;
        }

        if (i > 0) {
            var faces = [offset, offset + 1, offset - 1, offset - 2];
            var faceoffset = geoGroup.faceidx;

            faceArray[faceoffset] = faces[0];
            faceArray[faceoffset + 1] = faces[1];
            faceArray[faceoffset + 2] = faces[3];
            faceArray[faceoffset + 3] = faces[1];
            faceArray[faceoffset + 4] = faces[2];
            faceArray[faceoffset + 5] = faces[3];

            geoGroup.faceidx += 6;
        }

        geoGroup.vertices += 2;
    }

};

function drawShapeStrip(geo: Geometry, points, colors, div, thickness, opacity, shape) {

    // points is a 2D array, dimensionality given by [num = cross-sectional
    // resolution][len = length of strip]
    var i, j, num, len;
    num = points.length;
    if (num < 2 || points[0].length < 2)
        return;

    for (i = 0; i < num; i++) { // spline to generate greater length-wise
        // resolution
        points[i] = subdivide_spline(points[i], div);
    }
    len = points[0].length;

    if (!thickness) // if thickness is 0, we can use a smaller geometry than
        // this function generates
        return drawThinStrip(geo, points[0], points[num - 1], colors);

    var axis, cs_shape, cs_bottom, cs_top, last_cs_bottom, last_cs_top;

    // cache the available cross-sectional shapes
    var cs_ellipse = [], cs_rectangle = [], cs_parabola = [];
    for (j = 0; j < num; j++) {
        cs_ellipse.push(0.25 + 1.5 *
            Math.sqrt((num - 1) * j - Math.pow(j, 2)) / (num - 1));
        cs_rectangle.push(0.5);
        cs_parabola.push(2 * (Math.pow(j / num, 2) - j / num) + 0.6);
    }

    /*
     * face_refs array is used to generate faces from vertexArray
     * iteratively. As we move through each cross-sectional segment of
     * points, we draw lateral faces backwards to the previous
     * cross-sectional segment.
     * 
     * To correctly identify the points needed to make each face we use this
     * array as a lookup table for the relative indices of each needed point
     * in the vertices array.
     * 
     * 4 points are used to create 2 faces.
     */

    var face_refs = [];
    for (j = 0; j < num * 2 - 1; j++) {
        /*
         * [curr vertex in curr cross-section, next vertex in curr
         * cross-section, next vertex in prev cross-section, curr vertex in
         * prev cross-section]
         */
        face_refs[j] = [j, j + 1, j + 1 - 2 * num, j - 2 * num];
    }
    // last face is different. easier to conceptualize this by drawing a
    // diagram
    face_refs[num * 2 - 1] = [j, j + 1 - 2 * num, j + 1 - 4 * num,
        j - 2 * num];

    var v_offset, va_offset, f_offset;
    var currentAtom;
    var color, colori;
    var vertexArray, colorArray, faceArray, face;
    let geoGroup = geo.updateGeoGroup();

    for (i = 0; i < len; i++) {
        let gnum = geo.groups;
        let replicating = false;
        geoGroup = geo.updateGeoGroup(2 * num); // ensure vertex capacity
        if (gnum != geo.groups && i > 0) {
            //we created a new geo - need to replicate vertices at edge 
            //(but not faces)
            i = i - 1;
            replicating = true;
        }
        colori = Math.round(i * (colors.length - 1) / len);
        color = CC.color(colors[colori]);

        last_cs_bottom = cs_bottom;
        last_cs_top = cs_top;
        cs_bottom = [];
        cs_top = [];
        axis = [];

        if (points[0][i].atom !== undefined) // TODO better edge case
        // handling
        {
            currentAtom = points[0][i].atom;
            if (shape === "oval")
                cs_shape = cs_ellipse;
            else if (shape === "rectangle")
                cs_shape = cs_rectangle;
            else if (shape === "parabola")
                cs_shape = cs_parabola;
        }
        if (!cs_shape)
            cs_shape = cs_rectangle;

        // calculate thickness at each width point, from cross-sectional
        // shape
        var toNext, toSide;
        for (j = 0; j < num; j++) {
            if (i < len - 1)
                toNext = points[j][i + 1].clone().sub(points[j][i]);
            else
                toNext = points[j][i - 1].clone().sub(points[j][i])
                    .negate();

            if (j < num - 1)
                toSide = points[j + 1][i].clone().sub(points[j][i]);
            else
                toSide = points[j - 1][i].clone().sub(points[j][i])
                    .negate();

            axis[j] = toSide.cross(toNext).normalize().multiplyScalar(
                thickness * cs_shape[j]);
        }

        // generate vertices by applying cross-sectional shape thickness to
        // input points
        for (j = 0; j < num; j++)
            cs_bottom[j] = points[j][i].clone().add(
                axis[j].clone().negate());
        for (j = 0; j < num; j++)
            cs_top[j] = points[j][i].clone().add(axis[j]);

        /*
         * Until this point the vertices have been dealt with as
         * Vector3() objects, but we need to serialize them into the
         * geoGroup.vertexArray, where every three indices represents the
         * next vertex. The colorArray is analogous.
         * 
         * In the following for-loops, j iterates through VERTICES so we
         * need to index them in vertexArray by 3*j + either 0, 1, or 2 for
         * xyz or rgb component.
         */

        vertexArray = geoGroup.vertexArray;
        colorArray = geoGroup.colorArray;
        faceArray = geoGroup.faceArray;
        v_offset = geoGroup.vertices;
        va_offset = v_offset * 3; // in case geoGroup already contains
        // vertices

        // bottom edge of cross-section, vertices [0, num)
        for (j = 0; j < num; j++) {
            vertexArray[va_offset + 3 * j + 0] = cs_bottom[j].x;
            vertexArray[va_offset + 3 * j + 1] = cs_bottom[j].y;
            vertexArray[va_offset + 3 * j + 2] = cs_bottom[j].z;
        }

        // top edge of cross-section, vertices [num, 2*num)
        // add these backwards, so that each cross-section's vertices are
        // added sequentially to vertexArray
        for (j = 0; j < num; j++) {
            vertexArray[va_offset + 3 * j + 0 + 3 * num] = cs_top[num - 1 - j].x;
            vertexArray[va_offset + 3 * j + 1 + 3 * num] = cs_top[num - 1 - j].y;
            vertexArray[va_offset + 3 * j + 2 + 3 * num] = cs_top[num - 1 - j].z;
        }

        for (j = 0; j < 2 * num; ++j) {
            colorArray[va_offset + 3 * j + 0] = color.r;
            colorArray[va_offset + 3 * j + 1] = color.g;
            colorArray[va_offset + 3 * j + 2] = color.b;
        }

        if (i > 0 && !replicating) {

            for (j = 0; j < num * 2; j++) {

                // get VERTEX indices of the 4 points of a rectangular face
                // (as opposed to literal vertexArray indices)
                face = [v_offset + face_refs[j][0],
                v_offset + face_refs[j][1],
                v_offset + face_refs[j][2],
                v_offset + face_refs[j][3]];

                f_offset = geoGroup.faceidx;

                // need 2 triangles to draw a face between 4 points
                faceArray[f_offset] = face[0];
                faceArray[f_offset + 1] = face[1];
                faceArray[f_offset + 2] = face[3];

                faceArray[f_offset + 3] = face[1];
                faceArray[f_offset + 4] = face[2];
                faceArray[f_offset + 5] = face[3];

                geoGroup.faceidx += 6;

                // TODO implement clickable the right way. midpoints of
                // strand between consecutive atoms
            }

            if (currentAtom.clickable || currentAtom.hoverable) {
                var faces = [];

                faces.push(new Triangle(last_cs_bottom[0],
                    cs_bottom[0], cs_bottom[num - 1]));
                faces.push(new Triangle(last_cs_bottom[0],
                    cs_bottom[num - 1], last_cs_bottom[num - 1]));

                faces.push(new Triangle(last_cs_bottom[num - 1],
                    cs_bottom[num - 1], cs_top[num - 1]));
                faces.push(new Triangle(last_cs_bottom[num - 1],
                    cs_top[num - 1], last_cs_top[num - 1]));

                faces.push(new Triangle(cs_top[0], last_cs_top[0],
                    last_cs_top[num - 1]));
                faces.push(new Triangle(cs_top[num - 1], cs_top[0],
                    last_cs_top[num - 1]));

                faces.push(new Triangle(cs_bottom[0],
                    last_cs_bottom[0], last_cs_top[0]));
                faces.push(new Triangle(cs_top[0], cs_bottom[0],
                    last_cs_top[0]));

                for (j in faces) {
                    currentAtom.intersectionShape.triangle.push(faces[j]);
                }
            }
        }

        geoGroup.vertices += 2 * num;
    }

    // for terminal faces
    vertexArray = geoGroup.vertexArray;
    colorArray = geoGroup.colorArray;
    faceArray = geoGroup.faceArray;
    v_offset = geoGroup.vertices;
    va_offset = v_offset * 3;
    f_offset = geoGroup.faceidx;

    for (i = 0; i < num - 1; i++) // "rear" face
    {
        face = [i, i + 1, 2 * num - 2 - i, 2 * num - 1 - i];

        f_offset = geoGroup.faceidx;

        faceArray[f_offset] = face[0];
        faceArray[f_offset + 1] = face[1];
        faceArray[f_offset + 2] = face[3];

        faceArray[f_offset + 3] = face[1];
        faceArray[f_offset + 4] = face[2];
        faceArray[f_offset + 5] = face[3];

        geoGroup.faceidx += 6;
    }

    for (i = 0; i < num - 1; i++) // "front" face
    {
        face = [v_offset - 1 - i, v_offset - 2 - i,
        v_offset - 2 * num + i + 1, v_offset - 2 * num + i];

        f_offset = geoGroup.faceidx;

        faceArray[f_offset] = face[0];
        faceArray[f_offset + 1] = face[1];
        faceArray[f_offset + 2] = face[3];

        faceArray[f_offset + 3] = face[1];
        faceArray[f_offset + 4] = face[2];
        faceArray[f_offset + 5] = face[3];

        geoGroup.faceidx += 6;
    }

};

function drawPlainStrip(geo, points, colors, div, thickness, opacity) {
    if ((points.length) < 2)
        return;

    var p1, p2;
    p1 = points[0];
    p2 = points[points.length - 1];

    p1 = subdivide_spline(p1, div);
    p2 = subdivide_spline(p2, div);
    if (!thickness)
        return drawThinStrip(geo, p1, p2, colors);

    // var vs = geo.vertices, fs = geo.faces;
    var vs = [];
    var axis, p1v, p2v, a1v, a2v;

    var faces = [[0, 2, -6, -8], [-4, -2, 6, 4], [7, -1, -5, 3],
    [-3, 5, 1, -7]];

    var offset, vertoffset, faceoffset;
    var color, colori;
    var currentAtom, lastAtom;
    var i, lim, j;
    var face1, face2, face3;
    var geoGroup, vertexArray, colorArray, faceArray;

    for (i = 0, lim = p1.length; i < lim; i++) {

        colori = Math.round(i * (colors.length - 1) / lim);
        color = CC.color(colors[colori]);

        vs.push(p1v = p1[i]); // 0
        vs.push(p1v); // 1
        vs.push(p2v = p2[i]); // 2
        vs.push(p2v); // 3
        if (i < lim - 1) {
            var toNext = p1[i + 1].clone().sub(p1[i]);
            var toSide = p2[i].clone().sub(p1[i]);
            axis = toSide.cross(toNext).normalize().multiplyScalar(
                thickness);
        }
        vs.push(a1v = p1[i].clone().add(axis)); // 4
        vs.push(a1v); // 5
        vs.push(a2v = p2[i].clone().add(axis)); // 6
        vs.push(a2v); // 7

        if (p1v.atom !== undefined)
            currentAtom = p1v.atom;

        geoGroup = geo.updateGeoGroup(8);
        vertexArray = geoGroup.vertexArray;
        colorArray = geoGroup.colorArray;
        faceArray = geoGroup.faceArray;
        offset = geoGroup.vertices;
        vertoffset = offset * 3;

        vertexArray[vertoffset] = p1v.x;
        vertexArray[vertoffset + 1] = p1v.y;
        vertexArray[vertoffset + 2] = p1v.z;
        vertexArray[vertoffset + 3] = p1v.x;
        vertexArray[vertoffset + 4] = p1v.y;
        vertexArray[vertoffset + 5] = p1v.z;
        vertexArray[vertoffset + 6] = p2v.x;
        vertexArray[vertoffset + 7] = p2v.y;
        vertexArray[vertoffset + 8] = p2v.z;
        vertexArray[vertoffset + 9] = p2v.x;
        vertexArray[vertoffset + 10] = p2v.y;
        vertexArray[vertoffset + 11] = p2v.z;
        vertexArray[vertoffset + 12] = a1v.x;
        vertexArray[vertoffset + 13] = a1v.y;
        vertexArray[vertoffset + 14] = a1v.z;
        vertexArray[vertoffset + 15] = a1v.x;
        vertexArray[vertoffset + 16] = a1v.y;
        vertexArray[vertoffset + 17] = a1v.z;
        vertexArray[vertoffset + 18] = a2v.x;
        vertexArray[vertoffset + 19] = a2v.y;
        vertexArray[vertoffset + 20] = a2v.z;
        vertexArray[vertoffset + 21] = a2v.x;
        vertexArray[vertoffset + 22] = a2v.y;
        vertexArray[vertoffset + 23] = a2v.z;

        for (j = 0; j < 8; ++j) {
            colorArray[vertoffset + 3 * j] = color.r;
            colorArray[vertoffset + 1 + 3 * j] = color.g;
            colorArray[vertoffset + 2 + 3 * j] = color.b;
        }

        if (i > 0) {

            // both points have distinct atoms
            var diffAtoms = ((lastAtom !== undefined && currentAtom !== undefined) && lastAtom.serial !== currentAtom.serial);

            for (j = 0; j < 4; j++) {

                var face = [offset + faces[j][0], offset + faces[j][1],
                offset + faces[j][2], offset + faces[j][3]];

                faceoffset = geoGroup.faceidx;

                faceArray[faceoffset] = face[0];
                faceArray[faceoffset + 1] = face[1];
                faceArray[faceoffset + 2] = face[3];
                faceArray[faceoffset + 3] = face[1];
                faceArray[faceoffset + 4] = face[2];
                faceArray[faceoffset + 5] = face[3];

                geoGroup.faceidx += 6;

                if (currentAtom.clickable || lastAtom.clickable || currentAtom.hoverable || lastAtom.hoverable) {

                    var p1a = vs[face[3]].clone(), p1b = vs[face[0]]
                        .clone(), p2a = vs[face[2]].clone(), p2b = vs[face[1]]
                            .clone();

                    p1a.atom = vs[face[3]].atom || null; // should be
                    // same
                    p2a.atom = vs[face[2]].atom || null;

                    p1b.atom = vs[face[0]].atom || null; // should be
                    // same
                    p2b.atom = vs[face[1]].atom || null;

                    if (diffAtoms) {
                        var m1 = p1a.clone().add(p1b).multiplyScalar(0.5);
                        var m2 = p2a.clone().add(p2b).multiplyScalar(0.5);
                        var m = p1a.clone().add(p2b).multiplyScalar(0.5);

                        if (j % 2 === 0) {
                            if (lastAtom.clickable || lastAtom.hoverable) {
                                face1 = new Triangle(m1, m, p1a);
                                face2 = new Triangle(m2, p2a, m);
                                face3 = new Triangle(m, p2a, p1a);
                                lastAtom.intersectionShape.triangle
                                    .push(face1);
                                lastAtom.intersectionShape.triangle
                                    .push(face2);
                                lastAtom.intersectionShape.triangle
                                    .push(face3);
                            }

                            if (currentAtom.clickable || currentAtom.hoverable) {
                                face1 = new Triangle(p1b, p2b, m);
                                face2 = new Triangle(p2b, m2, m);
                                face3 = new Triangle(p1b, m, m1);
                                currentAtom.intersectionShape.triangle
                                    .push(face1);
                                currentAtom.intersectionShape.triangle
                                    .push(face2);
                                currentAtom.intersectionShape.triangle
                                    .push(face3);
                            }
                        } else {
                            if (currentAtom.clickable || currentAtom.hoverable) {
                                face1 = new Triangle(m1, m, p1a);
                                face2 = new Triangle(m2, p2a, m);
                                face3 = new Triangle(m, p2a, p1a);
                                currentAtom.intersectionShape.triangle
                                    .push(face1);
                                currentAtom.intersectionShape.triangle
                                    .push(face2);
                                currentAtom.intersectionShape.triangle
                                    .push(face3);
                            }

                            if (lastAtom.clickable || lastAtom.hoverable) {
                                face1 = new Triangle(p1b, p2b, m);
                                face2 = new Triangle(p2b, m2, m);
                                face3 = new Triangle(p1b, m, m1);
                                lastAtom.intersectionShape.triangle
                                    .push(face1);
                                lastAtom.intersectionShape.triangle
                                    .push(face2);
                                lastAtom.intersectionShape.triangle
                                    .push(face3);
                            }
                        }

                    }

                    // face for single atom
                    else if (currentAtom.clickable || currentAtom.hoverable) {
                        face1 = new Triangle(p1b, p2b, p1a);
                        face2 = new Triangle(p2b, p2a, p1a);
                        currentAtom.intersectionShape.triangle.push(face1);
                        currentAtom.intersectionShape.triangle.push(face2);
                    }

                }

            }
        }

        geoGroup.vertices += 8;
        lastAtom = currentAtom;
    }

    var vsize = vs.length - 8; // Cap

    geoGroup = geo.updateGeoGroup(8);
    vertexArray = geoGroup.vertexArray;
    colorArray = geoGroup.colorArray;
    faceArray = geoGroup.faceArray;
    offset = geoGroup.vertices;
    vertoffset = offset * 3;
    faceoffset = geoGroup.faceidx;

    for (i = 0; i < 4; i++) {
        vs.push(vs[i * 2]);
        vs.push(vs[vsize + i * 2]);

        var v1 = vs[i * 2], v2 = vs[vsize + i * 2];

        vertexArray[vertoffset + 6 * i] = v1.x;
        vertexArray[vertoffset + 1 + 6 * i] = v1.y;
        vertexArray[vertoffset + 2 + 6 * i] = v1.z;
        vertexArray[vertoffset + 3 + 6 * i] = v2.x;
        vertexArray[vertoffset + 4 + 6 * i] = v2.y;
        vertexArray[vertoffset + 5 + 6 * i] = v2.z;

        colorArray[vertoffset + 6 * i] = color.r;
        colorArray[vertoffset + 1 + 6 * i] = color.g;
        colorArray[vertoffset + 2 + 6 * i] = color.b;
        colorArray[vertoffset + 3 + 6 * i] = color.r;
        colorArray[vertoffset + 4 + 6 * i] = color.g;
        colorArray[vertoffset + 5 + 6 * i] = color.b;

    }

    vsize += 8;

    face1 = [offset, offset + 2, offset + 6, offset + 4];
    face2 = [offset + 1, offset + 5, offset + 7, offset + 3];

    faceArray[faceoffset] = face1[0];
    faceArray[faceoffset + 1] = face1[1];
    faceArray[faceoffset + 2] = face1[3];
    faceArray[faceoffset + 3] = face1[1];
    faceArray[faceoffset + 4] = face1[2];
    faceArray[faceoffset + 5] = face1[3];
    faceArray[faceoffset + 6] = face2[0];
    faceArray[faceoffset + 7] = face2[1];
    faceArray[faceoffset + 8] = face2[3];
    faceArray[faceoffset + 9] = face2[1];
    faceArray[faceoffset + 10] = face2[2];
    faceArray[faceoffset + 11] = face2[3];

    geoGroup.faceidx += 12;
    geoGroup.vertices += 8;

    // TODO: Add intersection planes for caps
};


function drawStrip(geo, points, colors, div, thickness, opacity, shape) {
    if (!shape || shape === "default")
        shape = "rectangle";
    if (shape === 'edged')
        drawPlainStrip(geo, points, colors, div, thickness, opacity);
    else if (shape === "rectangle" || shape === "oval" || shape === "parabola")
        drawShapeStrip(geo, points, colors, div, thickness, opacity, shape);
};

// check if given atom is an alpha carbon
function isAlphaCarbon(atom) {
    return atom && atom.elem === "C" && atom.atom === "CA"; // note that
    // calcium is
    // also CA
};

// check whether two atoms are members of the same residue or subsequent,
// connected residues (a before b)
function inConnectedResidues(a, b) {
    if (a && b && a.chain === b.chain) {
        if (!a.hetflag && !b.hetflag && (a.reschain === b.reschain) &&
            (a.resi === b.resi || a.resi === b.resi - 1))
            return true;
        if (a.resi < b.resi) {
            // some PDBs have gaps in the numbering but the residues are
            // still connected
            // assume if within 4A they are connected
            var dx = a.x - b.x;
            var dy = a.y - b.y;
            var dz = a.z - b.z;
            var dist = dx * dx + dy * dy + dz * dz;
            if (a.atom == "CA" && b.atom == "CA" && dist < 16.0) //protein residues not connected
                return true; // calpha dist
            else if ((a.atom == "P" || b.atom == "P") && dist < 64.0) //dna
                return true;
        }
    }

    return false;
};

// add geo to the group
function setGeo(group, geo, opacity, outline, setNormals) {

    if (geo == null || geo.vertices == 0) return;
    if (setNormals) {
        geo.initTypedArrays();
        geo.setUpNormals();
    }

    var cartoonMaterial = new MeshDoubleLambertMaterial();
    cartoonMaterial.vertexColors = Coloring.FaceColors;
    if (typeof (opacity) === "number" && opacity >= 0 && opacity < 1) {
        cartoonMaterial.transparent = true;
        cartoonMaterial.opacity = opacity;
    }
    cartoonMaterial.outline = outline;
    var cartoonMesh = new Mesh(geo, cartoonMaterial as Material);
    group.add(cartoonMesh);
};

function addBackbonePoints(points, num, smoothen, backbonePt,
    orientPt, prevOrientPt, backboneAtom, atoms, atomi) {
    var widthScalar, i, delta, v, addArrowPoints, testStyle;

    if (!backbonePt || !orientPt || !backboneAtom)
        return;

    // the side vector points along the axis from backbone atom to
    // orientation atom (eg. CA to O, in peptides)
    var sideVec = orientPt.sub(backbonePt);
    sideVec.normalize();

    //find next atom like this one
    var forwardVec = atoms[atomi];
    for (i = atomi + 1; i < atoms.length; i++) {
        forwardVec = atoms[i];
        if (forwardVec.atom == backboneAtom.atom)
            break;
    }
    // the forward vector points along the axis from backbone atom to next
    // backbone atom
    forwardVec = forwardVec ? new Vector3(forwardVec.x,
        forwardVec.y, forwardVec.z) : new Vector3(0, 0, 0);
    forwardVec.sub(backbonePt);

    // adjustments for proper beta arrow appearance
    if (backboneAtom.ss === "arrow start") {
        var adjustment = forwardVec.clone().multiplyScalar(0.3).cross(
            orientPt); // adjust perpendicularly to strand face
        backbonePt.add(adjustment);

        var upVec = forwardVec.clone().cross(sideVec).normalize();
        sideVec.rotateAboutVector(upVec, 0.43);
    }

    // determine from cartoon style or secondary structure how wide the
    // strand should be here
    // ribbon shape should have same width as thickness
    if (backboneAtom.style.cartoon.ribbon) {
        widthScalar = backboneAtom.style.cartoon.thickness || defaultThickness;

    } else // depending on secondary structure, multiply the orientation
    // vector by some scalar
    {
        if (!backboneAtom.style.cartoon.width) {
            if (backboneAtom.ss === "c") {
                if (backboneAtom.atom === "P")
                    widthScalar = nucleicAcidWidth;
                else
                    widthScalar = coilWidth;
            } else if (backboneAtom.ss === "arrow start") {
                widthScalar = helixSheetWidth;
                addArrowPoints = true;

            } else if (backboneAtom.ss === "arrow end")
                widthScalar = coilWidth;

            else if (backboneAtom.ss === "h" &&
                backboneAtom.style.cartoon.tubes ||
                backboneAtom.ss === "tube start")
                widthScalar = coilWidth;

            else
                widthScalar = helixSheetWidth;
        } else
            widthScalar = backboneAtom.style.cartoon.width;
    }

    // make sure the strand orientation doesn't twist more than 90 degrees
    if (prevOrientPt != null && sideVec.dot(prevOrientPt) < 0)
        sideVec.negate();

    sideVec.multiplyScalar(widthScalar);
    for (i = 0; i < num; i++) {
        // produces NUM incremental points from backbone atom minus
        // orientation vector
        // to backbone atom plus orientation vector
        delta = -1 + i * 2 / (num - 1); // -1 to 1 incrementing by num
        v = new Vector3(backbonePt.x + delta * sideVec.x,
            backbonePt.y + delta * sideVec.y, backbonePt.z + delta * sideVec.z);
        v.atom = backboneAtom;
        if (smoothen && backboneAtom.ss === "s")
            v.smoothen = true;
        points[i].push(v); // a num-length array of arrays, where each
        // inner array contains length-wise points
        // along the backbone offset by some constant pertaining to its cell
        // in the outer array
    }

    if (addArrowPoints) {

        sideVec.multiplyScalar(2);
        for (i = 0; i < num; i++) {
            delta = -1 + i * 2 / (num - 1); // -1 to 1 incrementing by num
            v = new Vector3(backbonePt.x + delta * sideVec.x,
                backbonePt.y + delta * sideVec.y, backbonePt.z + delta * sideVec.z);
            v.atom = backboneAtom;
            v.smoothen = false;
            v.skip = true;
            points[i].push(v);
        }
    }

    // make sure the strand is all the same style
    testStyle = backboneAtom.style.cartoon.style || 'default';
    if (points.style) {
        if (points.style != testStyle) {
            console
                .log("Warning: a cartoon chain's strand-style is ambiguous");
            points.style = 'default';
        }

    } else
        points.style = testStyle;

    // revert ss keywords used for arrow rendering back to original value
    if (backboneAtom.ss === "arrow start" || backboneAtom.ss === "arrow end")
        backboneAtom.ss = "s";

    return addArrowPoints;
};

// proteins na backbone na terminus nucleobases
const cartoonAtoms = {
    "C": true, "CA": true, "O": true, "P": true, "OP2": true,
    "O2P": true, "O5'": true, "O3'": true, "C5'": true,
    "C2'": true, "O5*": true, "O3*": true, "C5*": true,
    "C2*": true, "N1": true, "N3": true
};
const purResns = { "DA": true, "DG": true, "A": true, "G": true };
const pyrResns = { "DT": true, "DC": true, "U": true, "C": true, "T": true };
const naResns = { "DA": true, "DG": true, "A": true, "G": true, "DT": true, "DC": true, "U": true, "C": true, "T": true };


export function drawCartoon(group, atomList, gradientrange, quality = 10) {

    let num = quality;
    let div = quality;

    var cartoon, prev, curr, next, currColor, nextColor, thickness, i;
    var backbonePt, orientPt, prevOrientPt, terminalPt, termOrientPt, baseStartPt, baseEndPt;
    var tubeStart, tubeEnd, drawingTube;
    var shapeGeo = new Geometry(true); // for shapes that don't need normals computed
    var geo = new Geometry(true);
    var colors = [];
    var points: any = [];
    var opacity = 1;
    var outline = false;

    var gradients: any = {};
    for (var g in Gradient.builtinGradients) {
        if (Gradient.builtinGradients.hasOwnProperty(g)) {
            //COUNTER INTUITIVE - spectrum reverses direction to gradient to match other tools
            gradients[g] = new Gradient.builtinGradients[g](gradientrange[1], gradientrange[0]);
        }
    }

    var cartoonColor = function (next, cartoon) { //atom and cartoon style object
        if (gradientrange && cartoon.color === 'spectrum') {
            if (cartoon.colorscheme in gradients) {
                return gradients[cartoon.colorscheme].valueToHex(next.resi);
            } else {
                return gradients.sinebow.valueToHex(next.resi);
            }
        }
        else {
            return getColorFromStyle(next, cartoon).getHex();
        }
    };

    for (i = 0; i < num; i++)
        points[i] = [];

    // first determine where beta sheet arrows and alpha helix tubes belong
    var inSheet = false;
    var inHelix = false; //only considering tube styled helices
    var atoms = [];
    for (i in atomList) {
        next = atomList[i];
        if (next.elem === 'C' && next.atom === 'CA') {
            var connected = inConnectedResidues(curr, next);

            // last two residues in a beta sheet become arrowhead
            if (connected && next.ss === "s") {
                inSheet = true;
            } else if (inSheet) {
                if (curr && prev && curr.style.cartoon.arrows && prev.style.cartoon.arrows) {
                    curr.ss = "arrow end";
                    prev.ss = "arrow start";
                }
                inSheet = false;
            }

            // first and last residues in a helix are used to draw tube
            if (connected && (curr.ss === "h" || curr.ss == "tube start") && curr.style.cartoon.tubes) {
                if (!inHelix && curr.ss != "tube start" && next.style.cartoon.tubes) {
                    next.ss = "tube start";
                    inHelix = true;
                }
            } else if (inHelix) {
                if (curr.ss === "tube start") {
                    curr.ss = "tube end"; //only one residue
                } else if (prev && prev.style.cartoon.tubes) {
                    prev.ss = "tube end";
                }
                inHelix = false;
            }
            prev = curr;
            curr = next;
        }
        if (next && next.atom in cartoonAtoms) {
            atoms.push(next);
        }
    }
    if (inHelix && curr.style.cartoon.tubes) {
        curr.ss = "tube end";
        inHelix = false;
    }

    var flushGeom = function (connect) {
        //write out points, update geom,etc
        if (points[0].length > 0) {
            drawStrip(geo, points, colors, div, thickness, opacity, points.style);
        }

        var saved = [], savedc = null;
        if (connect) {
            //recycle last point to first point of next points array
            for (i = 0; i < num; i++) {
                saved[i] = points[i][points[i].length - 1];
            }
            savedc = colors[colors.length - 1];
        }
        points = [];
        for (i = 0; i < num; i++)
            points[i] = [];
        colors = [];

        if (connect) {
            for (i = 0; i < num; i++) {
                points[i].push(saved[i]);
            }
            colors.push(savedc);
        }

        setGeo(group, geo, opacity, outline, true);
        setGeo(group, shapeGeo, opacity, outline, false);
        geo = new Geometry(true);
        shapeGeo = new Geometry(true);
    };

    // then accumulate points
    curr = undefined;
    let disconnects = []
    for (var a = 0; a < atoms.length; a++) {
        next = atoms[a];

        var nextresn = next.resn.trim();
        var inNucleicAcid = nextresn in naResns;
        opacity = 1;
        // determine cartoon style
        cartoon = next.style.cartoon;
        if (curr && curr.style.cartoon)
            opacity = curr.style.cartoon.opacity;
        if (curr && curr.style.cartoon && curr.style.cartoon.outline)
            outline = curr.style.cartoon.outline;

        // create a new geometry when opacity changes
        //this should work fine if opacity is set by chain, but will
        //break if it changes within the chain
        if (curr && curr.style.cartoon && (!next.style.cartoon ||
            curr.style.cartoon.opacity != next.style.cartoon.opacity)) {
            flushGeom(curr.chain == next.chain);
        }

        //check for disconnects in the same chain
        if (curr && next && !inConnectedResidues(curr, next) && curr.chain &&
            curr.chain == next.chain && !curr.hetflag && !next.hetflag &&
            curr.reschain + 1 == next.reschain) {
            disconnects.push([curr, next]);
        }

        if (cartoon.style === "trace") // draw cylinders connecting
        // consecutive 'backbone' atoms
        {
            /*
             * "trace" style just draws cylinders between consecutive
             * 'backbone' atoms, such as alpha carbon for polypeptides and
             * phosphorus for DNA.
             */
            if (next.hetflag) {
                ; //ignore non-protein atoms
            } else if (next.elem === 'C' && next.atom === 'CA' ||
                inNucleicAcid && next.atom === "P" ||
                next.atom === 'BB') {
                // determine cylinder color
                nextColor = cartoonColor(next, cartoon);

                // determine cylinder thickness
                if (isNumeric(cartoon.thickness))
                    thickness = cartoon.thickness;
                else
                    thickness = defaultThickness;

                if (inConnectedResidues(curr, next)) {
                    // if both atoms are same color, draw single cylinder
                    if (nextColor == currColor) {
                        var color = CC.color(nextColor);
                        GLDraw.drawCylinder(shapeGeo, curr, next,
                            thickness, color, 2, 2);
                    }

                    else // otherwise draw cylinders for each color
                    // (split down the middle)
                    {
                        var midpoint = new Vector3().addVectors(
                            curr, next).multiplyScalar(0.5);
                        var color1 = CC.color(currColor);
                        var color2 = CC.color(nextColor);
                        GLDraw.drawCylinder(shapeGeo, curr,
                            midpoint, thickness, color1, 2, 0);
                        GLDraw.drawCylinder(shapeGeo, midpoint,
                            next, thickness, color2, 0, 2);
                    } // note that an atom object can be duck-typed as a
                    // Vector3 in this case
                }

                if ((next.clickable === true || next.hoverable) && (next.intersectionShape !== undefined)) {
                    //can click on joints to get alpha carbons
                    var center = new Vector3(next.x, next.y, next.z);
                    next.intersectionShape.sphere.push(new Sphere(center, thickness));
                }

                curr = next;
                currColor = nextColor;
            }
        } else // draw default-style cartoons based on secondary structure
        {
            // draw backbone through these atoms
            if (isAlphaCarbon(next) || inNucleicAcid && (next.atom === "P" || next.atom.indexOf('O5') == 0)) {
                if (drawingTube) {
                    if (next.ss === "tube end") {
                        drawingTube = false;
                        tubeEnd = new Vector3(next.x, next.y, next.z);
                        GLDraw.drawCylinder(shapeGeo, tubeStart,
                            tubeEnd, 2, CC.color(currColor), 1,
                            1);
                        next.ss = "h";

                    }
                    else if (curr.chain != next.chain || curr.ss === "tube end") { //don't span chains no matter what, check for short tubes (less than ideal)
                        drawingTube = false;
                        curr.ss = "h";
                        tubeEnd = new Vector3(curr.x, curr.y, curr.z);
                        GLDraw.drawCylinder(shapeGeo, tubeStart,
                            tubeEnd, 2, CC.color(currColor), 1,
                            1);
                    }
                    else
                        continue; // don't accumulate strand points while
                    // in the middle of drawing a tube
                }

                // end of a chain of connected residues (of same style)
                if (curr && (!inConnectedResidues(curr, next) || curr.ss === "tube start")) {
                    if (curr.ss === "tube start") {
                        drawingTube = true;
                        tubeStart = new Vector3(curr.x, curr.y,
                            curr.z);
                        curr.ss = "h";
                    }

                    if (baseEndPt) // draw the last base if it's a NA chain
                    {
                        if (terminalPt)
                            baseStartPt = new Vector3().addVectors(
                                curr, terminalPt).multiplyScalar(0.5);
                        else
                            baseStartPt = new Vector3(curr.x,
                                curr.y, curr.z);

                        GLDraw.drawCylinder(shapeGeo, baseStartPt,
                            baseEndPt, baseThickness, CC
                                .color(baseEndPt.color), 0, 2);
                        addBackbonePoints(points, num,
                            true, terminalPt, termOrientPt,
                            prevOrientPt, curr, atoms, a);
                        colors.push(nextColor);

                        baseStartPt = null;
                        baseEndPt = null;
                    }

                    // draw accumulated strand points
                    if (points[0].length > 0)
                        drawStrip(geo, points, colors, div, thickness,
                            opacity, points.style);

                    // clear arrays for points and colors
                    points = [];
                    for (i = 0; i < num; i++)
                        points[i] = [];
                    colors = [];
                }

                // reached next residue (potentially the first residue)
                if (curr === undefined || curr.rescode != next.rescode || curr.resi != next.resi) {
                    if (baseEndPt && curr != undefined) // draw last NA residue's base
                    {
                        // start the cylinder at the midpoint between
                        // consecutive backbone atoms
                        baseStartPt = new Vector3().addVectors(curr,
                            next).multiplyScalar(0.5);
                        var startFix = baseStartPt.clone().sub(baseEndPt)
                            .multiplyScalar(0.02); // TODO: apply this
                        // as function of
                        // thickness
                        baseStartPt.add(startFix);

                        GLDraw.drawCylinder(shapeGeo, baseStartPt,
                            baseEndPt, baseThickness, CC
                                .color(baseEndPt.color), 0, 2);
                        baseStartPt = null;
                        baseEndPt = null;
                    }

                    // determine color and thickness of the next strand
                    // segment
                    nextColor = cartoonColor(next, cartoon);
                    colors.push(nextColor);
                    if (isNumeric(cartoon.thickness))
                        thickness = cartoon.thickness;
                    else
                        thickness = defaultThickness;

                    curr = next; // advance backbone
                    backbonePt = new Vector3(curr.x, curr.y, curr.z);
                    backbonePt.resi = curr.resi;
                    currColor = nextColor;
                }

                // click handling
                if ((next.clickable === true || next.hoverable === true) &&
                    (next.intersectionShape === undefined || next.intersectionShape.triangle === undefined))
                    next.intersectionShape = {
                        sphere: null,
                        cylinder: [],
                        line: [],
                        triangle: []
                    };
            }
            // atoms used to orient the backbone strand
            else if (curr != undefined && (isAlphaCarbon(curr) && next.atom === "O" ||
                inNucleicAcid && curr.atom === "P" &&
                (next.atom === "OP2" || next.atom === "O2P") ||
                inNucleicAcid && curr.atom.indexOf("O5") == 0 &&
                next.atom.indexOf("C5") == 0)) {
                orientPt = new Vector3(next.x, next.y, next.z);
                orientPt.resi = next.resi;
                if (next.atom === "OP2" || next.atom === "O2P") // for NA 3'
                    // terminus
                    termOrientPt = new Vector3(next.x, next.y,
                        next.z);
            }

            // NA 3' terminus is an edge case, need a vector for most recent
            // O3'
            else if (inNucleicAcid && next.atom.indexOf("O3") == 0) {
                terminalPt = new Vector3(next.x, next.y, next.z);
            }

            // atoms used for drawing the NA base cylinders (diff for
            // purines and pyramidines)
            else if ((next.atom === "N1" && (nextresn in purResns)) ||
                (next.atom === "N3" && (nextresn in pyrResns))) {
                baseEndPt = new Vector3(next.x, next.y, next.z);
                baseEndPt.color = getColorFromStyle(next, cartoon)
                    .getHex();
            }

            // when we have a backbone point and orientation point in the
            // same residue, accumulate strand points
            if (orientPt && backbonePt && orientPt.resi === backbonePt.resi) {
                addBackbonePoints(points, num, true,
                    backbonePt, orientPt, prevOrientPt, curr, atoms,
                    a);
                prevOrientPt = orientPt;
                backbonePt = null;
                orientPt = null;
                colors.push(nextColor);
            }
        }

    }

    if (baseEndPt) // draw last NA base if needed
    {
        if (terminalPt)
            baseStartPt = new Vector3().addVectors(curr, terminalPt)
                .multiplyScalar(0.5);
        else
            baseStartPt = new Vector3(curr.x, curr.y, curr.z);

        GLDraw.drawCylinder(shapeGeo, baseStartPt, baseEndPt, baseThickness,
            CC.color(baseEndPt.color), 0, 2);
        addBackbonePoints(points, num, true, terminalPt,
            termOrientPt, prevOrientPt, curr, atoms, a);
        colors.push(nextColor);
    }

    // for default style, draw the last strand
    flushGeom(false);

    //cartoon gaps
    var drawGap = function (start: AtomSpec, end: AtomSpec) {
        if (start.style.cartoon.gapcutoff &&
            start.style.cartoon.gapcutoff == end.style.cartoon.gapcutoff) {
            let cut = start.style.cartoon.gapcutoff;
            let gap = end.resi - start.resi;
            if (gap > 0 && gap < cut) {

                let radius = 0.25;
                let xdiff = end.x-start.x;
                let ydiff = end.y-start.y;
                let zdiff = end.z-start.z;

                let gapLength = Math.sqrt(xdiff*xdiff+ydiff*ydiff+zdiff*zdiff);
                let cylinderLength = gapLength/(2*gap); //one dash for each missing residue, evenly spaced

                let new_start = new Vector3(start.x,start.y,start.z);
                let div = gapLength/cylinderLength;
                let dashVector = new Vector3((end.x - start.x) / div, (end.y - start.y) / div, (end.z - start.z) / div);

                new_start.add({x:dashVector.x/2,y:dashVector.y/2,z:dashVector.z/2});
                let new_end = new_start.clone().add(dashVector);
                dashVector.multiplyScalar(2); //skip over dash and gap
                let fakeres = extend({},start);
                for (var place = 0; place < gap; place++) {
                    fakeres.resi += 1;
                    let color = cartoonColor(fakeres, fakeres.style.cartoon);
                    GLDraw.drawCylinder(shapeGeo, new_start, new_end, radius, CC.color(color), CAP.FLAT, CAP.FLAT);
                    new_start.add(dashVector);
                    new_end.add(dashVector);
                }
                flushGeom(false);
            }

        }
    }

    for (let pair of disconnects) {
        drawGap(pair[0], pair[1]);
    }
};



